import {
  StyleSheet,
  View,
  Text,
  Image,
  Button,
  FlatList,
  SectionList,
} from "react-native";
import {useState} from "react"

const logo = {
  uli: "",
  width: 50,
  height: 50,
};

const data = [
  { key: "FYT" },
  { key: "YXD" },
  { key: "NXL" },
  { key: "SMA" },
  { key: "YY" },
  { key: "CX" },
  { key: "ZX" },
  { key: "WYY" },
];

const data2 = [
  { title: "FYT", data: ["one", "two", "three"] },
  { title: "FYT", data: ["one", "two", "three"] },
  { title: "YXD", data: ["one", "two", "three"] },
  { title: "NXL", data: ["one", "two", "three"] },
  { title: "SMA", data: ["one", "two", "three"] },
  { title: "YY", data: ["one", "two", "three"] },
  { title: "CX", data: ["one", "two", "three"] },
  { title: "ZX", data: ["one", "two", "three"] },
  { title: "WYY", data: ["one", "two", "three"] },
];

const getData = async () => {
  const res = await fetch(
    "https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312"
  );
  console.log(res);
};

export default function App() {
 
  const [isRefresh,setIsRefresh] = useState(false) 

  //下拉刷新
  const handleRefresh = () => {
      console.log("下拉刷新")
      setIsRefresh(true)
  }
  //上拉加载
  const handResponderEnd = ()=>{
    console.log("上拉加载")
  }

  return (
    <View style={styles.container}>
      <Text>yuanxiaodong</Text>
      <Image source={logo} />
      <FlatList
        data={data}
        renderItem={(item) => {
          return <Text>{item.key}</Text>;
        }}
        keyExtractor={(item, index) => index}
        refreshing={isRefresh}
        onRefresh={handleRefresh}
        onResponderEnd={handResponderEnd}
      ></FlatList>
      <SectionList
        sections={data2}
        renderItem={(item) => <Text>{item}</Text>}
        renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
        keyExtractor={(item, index) => index}
        stickySectionHeadersEnabled={true}
      ></SectionList>
      <Button title="获取数据" onPress={getData} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffff",
    alignItems: "center",
    justifyContent: "center",
  },
});

// FlatList
//用于展示单一维度的数据集合，即所有的数据项都处于同一级别，没有层级或分组的概念。它适合用于显示一个简单的、扁平的列表，如新闻列表、照片流或消息列表。


// SectionList
// 1.用于展示具有分组结构的数据集合，即数据被分成多个部分或章节，每个章节有自己的标题和数据项。它适合用于显示如联系人列表、文章分类或任何需要分组显示的场景。
// 2.吸顶悬浮